<template>
  <div class="hello">
    <div id="container"></div>
  </div>
</template>

<script>
import { Chart } from '@antv/g2';
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },
  data(){
	  return{
		  data:[
			    { "type": "数学与统计学院（二级）", "value": 1 },
				{ "type": "学与统计学院", "value": 1 },
				{ "type": "生命科学技术学院（二级）", "value": 1 },
				{ "type": "人文学院（二级）", "value": 1 },
				{ "type": "人文学院", "value": 1 },
				{ "type": "人工智能学院", "value": 1 },
				{ "type": "空间科学与技术学院", "value": 1 },
				{ "type": "经济与管理学院", "value": 1 },
				{ "type": "海棠九号书院", "value": 1 },
				{ "type": "外国语学院（二级）", "value": 2 },
				{ "type": "计算机科学与技术学院", "value": 2 },
				{ "type": "电子工程学院（二级）", "value": 2 },
				{ "type": "电子工程学院", "value": 2 },
				{ "type": "空间科学与技术学院（二级）", "value": 3 },
				{ "type": "机电工程学院", "value": 3 },
				{ "type": "通信工程学院（二级）", "value": 4 },
				{ "type": "通信工程学院", "value": 4 },
				{ "type": "海棠七号书院", "value": 4 },
				{ "type": "先进材料与纳米科技学院（二级）", "value": 6 },
				{ "type": "海棠八号书院", "value": 8 },
				{ "type": "物理与光电工程学院（二级）", "value": 20 }
		  ]
	  }
  },
  methods:{
	  createChart(){
		  const chart = new Chart({
		    container: 'container',
		    autoFit: true,
		    height: 800,
		  });
		  chart.data(this.data);
		  chart.scale({
		    value: {
		      max: 30,
		      min: 0,
		      alias: '数量（个）',
		    },
		  });
		  chart.axis('type', {
		    title: null,
		    tickLine: null,
		    line: null,
		  });
		  
		  chart.axis('value', {
		    label: null,
		    title: {
		      offset: 30,
		      style: {
		        fontSize: 12,
		        fontWeight: 300,
		      },
		    },
		  });
		  chart.legend(false);
		  chart.coordinate().transpose();
		  chart
		    .interval()
		    .position('type*value')
		    .size(26)
		    .label('value', {
		      style: {
		        fill: '#8d8d8d',
		      },
		      offset: 10,
		    });
		  chart.interaction('element-active');
		  chart.render();
	  }
  },
  mounted(){
	  this.createChart()
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>
